<!-- FloatButton.vue -->
<template>
  <div class="float-container">
    <img
      :src="mdiIcon.plusIcon"
      class="main-btn animate__animated"
      :class="[buttonAnimation]"
      @click.stop="togglePopup"
      @animationend="buttonAnimation = ''"
    />

    <PopupMenu
      v-if="showPopup"
      :items="menuItems"
      :position="buttonPosition"
      @item-click="handleItemClick"
      @close="showPopup = false"
    />
  </div>
</template>
  
  <script setup>
import { ref, defineProps, defineEmits } from "vue";
import PopupMenu from "./PopupMenu.vue";
import { mdiIcon } from "@/store/mdiIconStore";

const emit = defineEmits(["item-click"]);

const props = defineProps({
  menuItems: {
    type: Array,
    default: () => [
      { text: "示例1", icon: "DocumentAdd" },
      { text: "示例2", icon: "Setting" },
    ],
  },
});

const showPopup = ref(false);
const buttonPosition = ref({ x: 0, y: 0 });
const buttonAnimation = ref("");

const togglePopup = (event) => {
  const rect = event.target.getBoundingClientRect();
  buttonPosition.value = { x: rect.left, y: rect.top };
  showPopup.value = !showPopup.value;
  buttonAnimation.value = "animate__pulse";
};

const handleItemClick = (item) => {
  emit("item-click", item);
  showPopup.value = false;
};
</script>
  
<style lang="less">
.float-container {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 2000;

  .main-btn {
    width: 56px;
    height: 56px;
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));

    &:hover {
      transform: scale(1.1);
    }

    &:active {
      transform: scale(0.95);
    }
  }
}
</style>